<template>
  <div class="w-[385px] h-full bg-white">
    <!-- 固定顶部按钮区域 -->
    <div class="flex-none px-6 pt-6 pb-[5px]">
      <!-- 模块添加按钮 -->
      <div class="flex flex-wrap">
        <el-button v-for="item in moduleButtons" :key="item.key" @click="handleModuleButtonClick(item.key)"
          class="w-[98px] mb-4 [&:nth-of-type(4)]:ml-0">
          {{ item.label }}
        </el-button>
      </div>
    </div>

    <!-- 可滚动的内容区域 -->
    <div class="flex-1 h-[82%] overflow-y-auto overflow-x-hidden px-6">
      <!-- Banner模块设置 -->
      <div v-if="bannerModule && activeModule?.type === 'banner'" class="h-auto">
        <BannerModule :model-value="bannerModule.data" @update:model-value="handleBannerUpdate" />
      </div>

      <!-- 动态模块设置（只显示当前激活的模块） -->
      <template v-for="module in modules" :key="module.id">
        <div v-if="isModuleActive(module)" class="h-auto">
          <!-- 标题模块 -->
          <TitleModule v-if="module.type === 'title'" :model-value="module.data"
            @update:model-value="(data) => handleModuleUpdate(module.id, data)"
            @delete="handleModuleDelete(module.id)" />

          <!-- 内容模块 -->
          <ContentModule v-else-if="module.type === 'content'" :model-value="module.data"
            @update:model-value="(data) => handleModuleUpdate(module.id, data)"
            @delete="handleModuleDelete(module.id)" />

          <!-- 页签模块 -->
          <TabsModule v-else-if="module.type === 'tabs'" :model-value="module.data"
            @update:model-value="(data) => handleModuleUpdate(module.id, data)"
            @delete="handleModuleDelete(module.id)" />

          <!-- 表格模块 -->
          <TableModule v-else-if="module.type === 'table'" :model-value="module.data"
            @update:model-value="(data) => handleModuleUpdate(module.id, data)"
            @delete="handleModuleDelete(module.id)" />

          <!-- 时间轴模块 -->
          <TimelineModule v-else-if="module.type === 'timeline'" :model-value="module.data"
            @update:model-value="(data) => handleModuleUpdate(module.id, data)"
            @delete="handleModuleDelete(module.id)" />
        </div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">

import { $t } from '#/locales';
import {
  BannerModule,
  TitleModule,
  ContentModule,
  TabsModule,
  TableModule,
  TimelineModule
} from './components/index';
import type {
  ModuleInstance,
  BannerModule as BannerModuleType,
  ActiveModule,
  ModuleType,
  ModuleData,
  BannerModuleData,
  TitleModuleData
} from './components/types';

interface Props {
  activeModule: ActiveModule | null;
  modules: ModuleInstance[];
  bannerModule: BannerModuleType | null;
}

interface Emits {
  (e: 'module-add', type: Exclude<ModuleType, 'banner'>): void;
  (e: 'module-delete', moduleId: string): void;
  (e: 'module-update', moduleId: string, data: ModuleData): void;
  (e: 'banner-update', data: BannerModuleData): void;
  (e: 'banner-activate'): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

// 模块按钮配置
const moduleButtons = [
  { key: 'banner' as const, label: 'banner' },
  { key: 'title' as const, label: $t('competition.modules.common.titleModule') },
  { key: 'content' as const, label: $t('competition.modules.common.contentModule') },
  { key: 'tabs' as const, label: $t('competition.modules.common.tabModule') },
  { key: 'table' as const, label: $t('competition.modules.common.table') },
  { key: 'timeline' as const, label: $t('competition.modules.common.timeline') },
];

/**
 * 检查模块是否为当前激活模块
 */
const isModuleActive = (module: ModuleInstance): boolean => {
  return props.activeModule?.type === module.type && props.activeModule?.id === module.id;
};

/**
 * 处理模块按钮点击
 */
const handleModuleButtonClick = (moduleType: ModuleType) => {
  if (moduleType === 'banner') {
    // 激活Banner模块
    emit('banner-activate');
    return;
  }

  // 其他模块类型，发送添加事件
  emit('module-add', moduleType);
};

/**
 * 处理模块删除
 */
const handleModuleDelete = (moduleId: string) => {
  emit('module-delete', moduleId);
};

/**
 * 处理模块数据更新
 */
const handleModuleUpdate = (moduleId: string, data: ModuleData) => {
  emit('module-update', moduleId, data);
};

/**
 * 处理Banner数据更新
 */
const handleBannerUpdate = (data: BannerModuleData) => {
  emit('banner-update', data);
};
</script>

<style lang="scss" scoped>
:deep(.el-form--inline .el-form-item) {
  margin-right: 0px;
}
</style>
